<template>
  <el-container>
    <el-aside style="min-width:200px; min-height:600px;">
      <!-- <el-scrollbar> -->
      <el-tree
        ref="labelTree"
        :data="labelTree"
        :props="defaultProps"
        node-key="id"
        highlight-current
        default-expand-all
        empty-text="No data"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node, data }">
          <span :title="node.label">{{ node.label }}</span>
        </span>
      </el-tree>
      <!-- </el-scrollbar> -->
    </el-aside>
    <el-main>
      <el-form ref="ruleForm" style="min-width: 500px;padding-left: 30px;" class="tag-form" :model="ruleForm" :rules="rules" label-width="150px">
        <el-form-item :label="$t('labelLevel.upLabelLevelId') + ':'" prop="upLabelLevelId">
          <el-select v-model="ruleForm.upLabelLevelId" style="width: 100%;" filterable :placeholder="$t('labelLevel.placeholder.upLabelLevelIdHint')">
            <el-option
              v-for="item in options"
              v-if="ruleForm.labelObject === item.labelObject && selectedLabelLevelId !== item.labelLevelId"
              :key="item.labelLevelId"
              style="width: 350px;"
              :label="item.labelLevelPathNameDialog"
              :value="item.labelLevelId"
              :title="item.labelLevelPathNameDialog"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('labelLevel.labelLevelName') + ':'" prop="labelLevelName">
          <el-input v-model="ruleForm.labelLevelName" maxlength="50" />
        </el-form-item>
        <el-form-item :label="$t('labelLevel.labelLevelDesc') + ':'">
          <el-input v-model="ruleForm.labelLevelDesc" maxlength="500" type="textarea" />
        </el-form-item>
        <el-col :span="24" style="padding-left: 100px;">
          <el-button plain @click="submitForm()" v-text="$t('submit')" />
          <el-button type="primary" plain @click="dialogFormVisible=true" v-text="$t('add')" />
          <el-button type="danger" plain @click="delTab()" v-text="$t('delete')" />
        </el-col>
      </el-form>
    </el-main>

    <el-dialog :append-to-body="true" :close-on-click-modal="false" :title="$t('labelLevel.title')" :visible.sync="dialogFormVisible" width="400px">
      <el-form ref="ruleDialogForm" label-width="150px" :model="ruleDialogForm" :rules="rules">
        <el-form-item :label="$t('labelLevel.upLabelLevelId') + ':'" prop="upLabelLevelId">
          <el-select v-model="ruleDialogForm.upLabelLevelId" style="width: 100%;" filterable :placeholder="$t('labelLevel.placeholder.upLabelLevelIdHint')">
            <el-option
              v-for="item in dialogOptions"
              :key="item.labelLevelId"
              style="width: 200px;"
              :label="item.labelLevelPathNameDialog"
              :value="item.labelLevelId"
              :title="item.labelLevelPathNameDialog"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('labelLevel.labelLevelName') + ':'" prop="labelLevelName">
          <el-input v-model="ruleDialogForm.labelLevelName" maxlength="50" style="width: 90%;" />
        </el-form-item>
        <el-form-item :label="$t('labelLevel.labelLevelDesc') + ':'">
          <el-input v-model="ruleDialogForm.labelLevelDesc" maxlength="500" style="width: 90%;" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" v-text="$t('cancelText')" />
        <el-button type="primary" @click="submitFormDialog()" v-text="$t('ok')" />
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: 'Label',
	    data() {
	      return {
      dialogFormVisible: false,
      highLight: true,
      ruleForm: {
        upLabelLevelId: '',
        labelLevelName: '',
        labelLevelDesc: '',
        labelLevelId: ''
      },
      ruleDialogForm: {
        upLabelLevelId: this.deflutLabelLevelId,
        labelLevelName: '',
        labelLevelDesc: '',
        labelObject: ''
      },
      rules: {
        upLabelLevelId: [
				  { required: true, message: this.$t('labelLevel.rules.upLabelLevelId'), trigger: 'blur' }
        ],
        labelLevelName: [
				  { required: true, message: this.$t('labelLevel.rules.labelLevelName'), trigger: 'blur' },
				  { min: 1, max: 50, message: this.$t('labelLevel.rules.labelLevelLength'), trigger: 'blur' }
        ]
      },
	        labelTree: [],
	        defaultProps: {
	          children: 'children',
	          label: 'labelLevelName'
	        },
      options: [],
      dialogOptions: [],
      oriDialogOptions: [],
      deflutLabelLevelId: 2,
      lastLabelLevelId: '',
      selectedLabelLevelId: this.deflutLabelLevelId
	      }
	    },
  created() {
    this.getLabelTree()
  },
	    methods: {
    getLabelTree() {
      const that = this
      that.loading = true
      this.R.forTaglib.get('/labelLevel/queryList').then(res => {
        this.labelTree = []
        var laberList = res
        // tree
        for (var i = 0; i < laberList.length; i++) {
          if (laberList[i].upLabelLevelId == null) {
            laberList[i].id = laberList[i].labelLevelId
            laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
            this.labelTree.push(laberList[i])
            break
          }
        }
        // options
        this.getLabelOptions()
        // 弹框options
        this.dialogOptions = []
        for (var i = 0; i < this.labelTree.length; i++) {
          if (this.labelTree[i].upLabelLevelId == null) {
            this.labelTree[i].labelLevelPathNameDialog = this.labelTree[i].labelLevelName
            // this.dialogOptions.push(this.labelTree[i])
            this.getDialogOptions(this.labelTree[i].children, this.labelTree[i])
            this.oriDialogOptions = this.dialogOptions
            break
          }
        }

        this.$nextTick(() => {
					    this.$refs.labelTree.setCurrentKey(this.deflutLabelLevelId)
          for (var i = 0; i < this.dialogOptions.length; i++) {
            if (this.dialogOptions[i].labelLevelId == this.deflutLabelLevelId) {
              this.handleNodeClick(this.dialogOptions[i])
            }
          }
        })

        that.loading = false
      }).catch(err => {
				    that.$message.error(err.toString())
      })
    },
    getChildren(laberList, labelLevelId) {
      var children = []
      for (var i = 0; i < laberList.length; i++) {
        if (laberList[i].upLabelLevelId != null && laberList[i].upLabelLevelId == labelLevelId) {
          laberList[i].id = laberList[i].labelLevelId
          laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
          children.push(laberList[i])
        }
      }
      return children
    },
    getLabelOptions() {
      this.options = []
      for (var i = 0; i < this.labelTree.length; i++) {
        if (this.labelTree[i].upLabelLevelId == null) {
          this.labelTree[i].labelLevelPathName = this.labelTree[i].labelLevelName
          this.options.push(this.labelTree[i])
          this.getOptions(this.labelTree[i].children, this.labelTree[i])
          break
        }
      }
    },
    getOptions(labelTree, label) {
      var upLabelLevelId = []
      for (var i = 0; i < labelTree.length; i++) {
        if (labelTree[i].labelLevelId != this.selectedLabelLevelId) {
          if (label.labelLevelPathName != null) {
            labelTree[i].labelLevelPathName = label.labelLevelPathName + '-->' + label.labelLevelName
          } else {
            labelTree[i].labelLevelPathName = label.labelLevelName
          }
          this.options.push(labelTree[i])
          this.getOptions(labelTree[i].children, labelTree[i])
        }
      }
    },
    getDialogOptions(labelTree, label) {
      for (var i = 0; i < labelTree.length; i++) {
        // 设置默认选中对象
        labelTree[i].labelLevelPathNameDialog = label.labelLevelPathNameDialog + '-->' + labelTree[i].labelLevelName
        this.dialogOptions.push(labelTree[i])
        this.getDialogOptions(labelTree[i].children, labelTree[i])
      }
    },
    handleNodeClick(data) {
      if (data.labelLevelId == 1) {
        this.$nextTick(() => {
					    this.$refs.labelTree.setCurrentKey(this.lastLabelLevelId)
          this.selectedLabelLevelId = this.lastLabelLevelId
          this.ruleDialogForm.upLabelLevelId = this.lastLabelLevelId
        })
        return
      }
      this.ruleForm.upLabelLevelId = data.upLabelLevelId
      this.ruleForm.labelLevelName = data.labelLevelName
      this.ruleForm.labelLevelDesc = data.labelLevelDesc
      this.ruleForm.labelLevelId = data.labelLevelId
      this.ruleForm.labelObject = data.labelObject
      this.lastLabelLevelId = data.labelLevelId
      this.selectedLabelLevelId = data.labelLevelId
      this.ruleDialogForm.upLabelLevelId = data.labelLevelId
      this.getLabelOptions()
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        if (valid) {
          this.$confirm(this.$t('labelLevel.tip.updateTip'), this.$t('tip'), {
						  confirmButtonText: this.$t('submitText'),
						  cancelButtonText: this.$t('cancelText'),
						  type: 'warning'
          }).then(() => {
            const that = this
            that.loading = true
            this.R.forTaglib.postJson('/labelLevel/editLabelLevel', this.ruleForm).then(res => {
							   if (res.ok) {
								   this.$message.success(this.$t('editSuccess'))
								   this.deflutLabelLevelId = this.ruleForm.labelLevelId
								   this.getLabelTree()
							   }
            }).catch(err => {
              that.$message.error(err.toString())
            })
            that.loading = false
          })
        }
      })
    },
    delTab() {
      if (!this.ruleForm.labelLevelId) {
        this.$message(this.$t('labelLevel.tip.labellLevelId'))
        return
      }
			 	this.$confirm(this.$t('labelLevel.tip.delTip'), this.$t('tip'), {
			 	  confirmButtonText: this.$t('submitText'),
			 	  cancelButtonText: this.$t('cancelText'),
			 	  type: 'warning'
			 	}).then(() => {
        const that = this
        that.loading = true
        this.R.forTaglib.delete('/labelLevel/' + this.ruleForm.labelLevelId).then(res => {
					    if (res.ok) {
						   this.$message.success(this.$t('delSuccess'))
						   for (var i = 0; i < this.dialogOptions.length; i++) {
              if (this.dialogOptions[i].labelLevelId == this.ruleForm.labelLevelId) {
                this.deflutLabelLevelId = (this.dialogOptions[i].upLabelLevelId == null ? 2 : this.dialogOptions[i].upLabelLevelId)
              }
						   }
						   this.getLabelTree()
          }
        }).catch(err => {
          that.$message.error(err.toString())
        })
        that.loading = false
			 	 })
    },
    submitFormDialog() {
      this.$refs.ruleDialogForm.validate(valid => {
        if (valid) {
          const that = this
          that.loading = true
          this.R.forTaglib.postJson('/labelLevel/addLabelLevel', this.ruleDialogForm).then(res => {
						   if (res.ok) {
							   this.$message.success(this.$t('saveSuccess'))
							   this.dialogFormVisible = false
							   this.deflutLabelLevelId = res.labelLevelId
							   that.ruleDialogForm = {}
							   this.getLabelTree()
						   }
          }).catch(err => {
            that.$message.error(err.toString())
          })
          that.loading = false
        }
      })
    }
	    }
	  }
</script>

<style>
	.tag-form{
		width: 400px;
		padding-top: 50px;
	}
	.v-modal {
	    position: inherit;
	}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
	  }
</style>
